<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="是否带有边框线">
                <el-radio-group v-model="propJson.border">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="列数">
                <el-input-number v-model="propJson.column" :min="1"/>
            </el-form-item>

            <el-form-item label="排列方向">
                <el-select v-model="propJson.direction" clearable placeholder="排列方向">
                    <el-option value="vertical" label="纵向"></el-option>
                    <el-option value="horizontal" label="横向"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="列表尺寸">
                <el-select v-model="propJson.size" clearable placeholder="列表尺寸">
                    <el-option value="large" label="大号"></el-option>
                    <el-option value="default" label="默认"></el-option>
                    <el-option value="small" label="小号"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="label宽度">
                <el-input v-model="propJson.labelWidth" placeholder="label宽度" />
            </el-form-item>

            <el-divider>标题内容</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.titleInfo ? propJson.titleInfo : {}" :commonParam="commonParam" />

            <el-divider>描述元素信息</el-divider>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.list">
                    <template #title>
                        <div class="collapseTitle">
                            <span>字段 {{item.label}}</span>
                        </div>
                    </template>
                    <el-form-item label="label名称">
                        <el-input v-model="item.label" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="元素所占列数">
                        <el-input-number v-model="item.span" :min="1"/>
                    </el-form-item>
                    <el-form-item label="元素所占行数">
                        <el-input-number v-model="item.rowspan" :min="1"/>
                    </el-form-item>
                    <el-form-item label="内容对其方式">
                        <el-select v-model="item.align" clearable placeholder="内容对其方式">
                            <el-option value="left" label="左对齐"></el-option>
                            <el-option value="center" label="居中对齐"></el-option>
                            <el-option value="right" label="右对齐"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签对其方式">
                        <el-select v-model="item.labelAlign" clearable placeholder="标签对其方式">
                            <el-option value="left" label="左对齐"></el-option>
                            <el-option value="center" label="居中对齐"></el-option>
                            <el-option value="right" label="右对齐"></el-option>
                        </el-select>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>

    </div>
</template>

<script name="DescriptionsDrawer" setup lang="ts">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue"

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});
</script>

<style scoped>

</style>